{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}
{% load staticfiles %}

{% block header %}
<a href="javascript:;" class="active">用户ID管理</a>
{% endblock %}


{% block action %}
<a class="roll-nav roll-right extra-right-btns pull-right" data-toggle="modal" data-target="#setValue">
    <i class="fa fa-plus"></i>
    新增
</a>
{% endblock %}


{% block main %}
<div class="wrapper wrapper-content">
    <div class="extra-search-form">
        {% crispy filter_form %}
    </div>
    <div class="extra-box-content">
        {% render_table table "table.html" %}
    </div>
</div>


<div class="modal inmodal fade" id="setValue" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2>新增用户ID名单</h2>
            </div>
            <div class="modal-body">
                <textarea class="form-control" id="id_value" name="value" placeholder="用户ID[批量添加时请以回车键隔开]"
                          rows="5"></textarea>
                <span id="id-value-error" class="help-block" style="color:darkred"></span>
                <div class="hr-line-dashed"></div>
                {{ create_form.menu_type }}
                <span id="id-menu_type-error" class="help-block" style="color:darkred"></span>
                <div class="hr-line-dashed"></div>
                {{ create_form.event_code }}
                <span id="id-event_code-error" class="help-block" style="color:darkred"></span>
                <div class="hr-line-dashed"></div>
                <input class="form-control datetime" id="id_end_time" name="end_time" placeholder="结束时间">
                <span id="id-end_time-error" class="help-block" style="color:darkred"></span>
                <div class="hr-line-dashed"></div>
                {{ create_form.menu_desc }}
                <span id="id-menu_desc-error" class="help-block" style="color:darkred"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" id="valueSave" class="btn btn-primary" data-uri="{% url 'menus:create' %}">保存
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block js %}
{{ block.super }}


{% include "datepicker.html" %}
{% include "menu/batch_delete.html" %}
<script>
    $(function () {
        $('select#id_filter_event_code.form-control').searchableSelect();
        $('select#id_event_code.form-control').searchableSelect();
    });
</script>

<script>
    $(function () {
        // 新增
        $('#valueSave').click(function () {
            var _this = $(this);
            var uri = _this.data('uri'),
                value = $("#id_value").val(),
                menu_type = $("#id_menu_type").val(),
                event_code = $("#id_event_code").val(),
                end_time = $("#id_end_time").val(),
                menu_desc = $("#id_menu_desc").val();
            $.ajax({
                url: uri,
                data: {
                    'value': value,
                    'menu_type': menu_type,
                    'event_code': event_code,
                    'end_time': end_time,
                    'menu_desc': menu_desc,
                    'dimension': "user_id",
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                dataType: "json",
                type: "POST",
                success: function (resp) {
                    if (resp.state) {
                        window.location.reload();
                    } else {
                        var error = resp.error;
                        for (var name in error) {
                            $("#id-" + name + "-error").html(error[name][0]);
                        }
                    }
                },
                error: function (err) {
                    if (err.statusText !== 'abort') {
                        swal({
                            title: "哎呀，出错了",
                            type: "error",
                            confirmButtonColor: "#1ab394"
                        });
                    }
                }
            })
        });
        // 错误提示复位
        $("#id_value").focus(function () {
            $("#id-value-error").html("");
        });
        $("#id_menu_type").focus(function () {
            $("#id-menu_type-error").html("");
        });
        $("#id_event_code").focus(function () {
            $("#id-event_code-error").html("");
        });
        $("#id_start_time").focus(function () {
            $("#id-start_time-error").html("");
        });
        $("#id_end_time").focus(function () {
            $("#id-end_time-error").html("");
        });
        $("#id_menu_desc").focus(function () {
            $("#id-menu_desc-error").html("");
        });
    });
</script>

{% endblock %}
